<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCAKE蛋糕-网上订购生日蛋糕</title>
    <link rel="stylesheet" href="./css/rester.css">
    <link rel="stylesheet" href="./css/mianbao.css">
    <link rel="icon" href="http://rhfgn51hx.hn-bkt.clouddn.com/v2-609f59fac9e2a93007e522868276f199_720w.jpg">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="center">
                <!-- logo插入区域 -->
                <div class="log">
                    <img src="./images/shouye.image/logo.png" alt="">
                </div>
                <!-- 导航栏 -->
                <ul id="one">
                    <li><a href="javascript:;">上海市</a></li>
                    <li><a href="javascript:;">所有产品</a></li>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="dangao.html">蛋糕</a></li>
                    <li><a href="mianbao.html">面包</a></li>
                    <li><a href="javascript:;">小食</a></li>
                    <li><a href="javascript:;">最新活动</a></li>
                </ul>
                <ul id="two">
                    <li><a href="#" id="huanying"> <img src="./images/shopping.image/人像.gif"
                                style="width: 20px;height:20px; margin-top: 28px;" alt=""></a>
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物01.png" alt="" id="shopping">
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物02.png" alt="" style="width: 30px;height:20px;">
                    </li>
                </ul>
            </div>
        </div>

    </header>

    <!-- 内容 -->
    <main>
        <!-- 渲染的区域 -->
        <div class="zhenbuchuo">
            <div class="center">
                <span style="font-size: 20px;color:green;margin-top:150px;"></span>
                <div class="xuanran">
                    <!-- <div class="xuanran-div">
                        <div class="xuanran-div-img">
                            <img src="./images/dangao.image/1.jpg" alt="">
                        </div>
                        <div class="xuanran-div-wenzi">
                            <p>xxxxxxxx</p>
                            <span>xxxxxxxxxxxxx</span>
                        </div>
                        <div class="xuanran-div-qian">
                            <div class="xuanran-div-qian-left">
                                <p>￥</p>
                            </div>
                            <div class="xuanran-div-qian-left">
                                <img src="./images/shouye.image/nb.png" alt="">
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <img src="" alt="">
    </main>
    <!-- 底部 -->
    <footer>
        <div class="center">
            <div class="footer-top">

                <div class="footer-top-noe1">
                    <div class="footer-top-noe1-top">
                        <img src="./images/shouye.image/logo2.png" alt="">
                    </div>
                    <div class="footer-top-noe1-bottom">
                        <p>订购热线:4006678678(8:00-2000)</p>
                        <p>客服邮箱:cs@mcake.com</p>
                        <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                        <p>食品生产许可证:S℃12431010700121</p>
                    </div>

                </div>

                <div class="footer-top-noe2">
                    <div class="ul1">
                        <ul>
                            <li><a href="javascript:;" id="n1">关于我们</a></li>
                            <li><a href="javascript:;">企业介绍</a></li>
                            <li><a href="javascript:;">媒体合作</a></li>
                            <li><a href="javascript:;">招贤纳士</a></li>
                            <li><a href="javascript:;">呼叫中心</a></li>
                        </ul>
                    </div>
                    <div class="ul2">
                        <ul>
                            <li><a href="javascript:;" id="n1">帮助中心</a></li>
                            <li><a href="javascript:;">投诉与建议</a></li>
                            <li><a href="javascript:;">会员权益</a></li>
                            <li><a href="javascript:;">购物指南</a></li>
                            <li><a href="javascript:;">支付类</a></li>
                            <li><a href="javascript:;">订单相关</a></li>
                            <li><a href="javascript:;">配送服务</a></li>
                        </ul>
                    </div>
                    <div class="ul3">
                        <ul>
                            <li><a href="javascript:;" id="n1">发现</a></li>
                            <li><a href="javascript:;">公告</a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer-top-noe3">
                    <div class="niubi">
                        <img src="./images/shouye.image/weibo.png" alt="">
                        <img src="./images/shouye.image/weixin.png" alt="">
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="footer-bottom-neihe">
                    <div class="footer-bottom-neihe1">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司</p>
                            <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                            <p>洽谈电话:021-52691591</p>
                            <p>社会信用代码:913101070678091460</p>
                            <p>食品经营许可证:JY13101070034251</p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe2">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司北京分公司</p>
                            <p>地止:北京市朝那阳区望京西路甲50号1号楼</p>
                            <p>洽谈电话:010-64720188 </p>
                            <p>社会信用代码:911101053484280752 </p>
                            <p>食品经营许可证:JY11105262932938 </p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe3">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司杭分公司</p>
                            <p>地址:杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                            <p>洽谈电话:0571-28103688</p>
                            <p>社会信用代码:913301060920344424</p>
                            <p>食品经营许可证:JY13301050141226</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="nbtz">
            <h4>Copyright©2012-2022上海卡法电子商务有限公司版权所有1沪CP备12022075号1沪公网安备31010702005582号</h4>
        </div>
    </footer>
</body>

</html>

<script src="./js/jquery.min.js"></script>
<script src="./js/data.js"></script>

<!-- 渲染代码 -->
<script>
    $(function () {
        getData();
    })
    function getData() {
        $.get('http://localhost/MCAKE/php/getGoodsList.php', { 'typeId': '002' }, function (nb) {
            console.log(JSON.parse(nb));
            let arr = JSON.parse(nb);
            let str = ''
            arr.forEach((nbtz, index) => {
                str += `
                <div class="xuanran-div" goodsid = ${nbtz.goodsId}>
                    <div class="xuanran-div-img">
                        <img src="${nbtz.goodsImg}" alt="">
                    </div>
                    <div class="xuanran-div-wenzi">
                        <p>${nbtz.goodsName}</p>
                        <span>${nbtz.goodsDesc}</span>
                    </div>
                    <div class="xuanran-div-qian">
                        <div class="xuanran-div-qian-left">
                            <p>￥${nbtz.goodsPrice}.00元</p>
                        </div>
                        <div class="xuanran-div-qian-left">
                            <img src="./images/shouye.image/nb.png" alt="">
                        </div>
                    </div>
                </div>`
            })
            $('.xuanran').html(str)
        })
    }

    $(function () {
        shoppingName()
    })
    function shoppingName() {
        $.get("http://localhost/MCAKE/php/getGoodsType.php", function (data) {
            console.log(data);
            data.forEach(function (nbtz, index) {
                $(".zhenbuchuo>.center>span").eq(index).html('面包')
            })
        }, "json")
    }
</script>

<!-- 跳转购物车 -->
<script>
    let gouwu = document.querySelector('#shopping')

    gouwu.onclick = function () {
        location.href = 'shoppings.html'
    }
</script>

<!-- 把商品的编号给到详情页 -->
<script>
    $('.xuanran').on('click', '.xuanran-div', function () {
        console.log($(this).attr('goodsid'));
        // console.log(e.target);

        let id = $(this).attr('goodsid');
        location.href = 'xiangqing.html?good=' + id;
    })
</script>